<!--
 * @author: 十一
 * @since: 2024-10-28
 * workers.vue
 * @desc: 职工考核统计
-->
<template>
  <div
    style="display: flex; align-items: center; justify-content: space-between"
  >
    <div>
      <a-form layout="inline">
        <a-form-item>
          <a-select
            v-model:value="formState.name"
            style="width: 280px"
            placeholder="考核名称查询"
            @change="handleChangeExamineName"
            allowClear
          >
            <a-select-option
              :value="item.id"
              v-for="item in examineName"
              :key="item.id"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-input
            v-model:value="formState.empname"
            style="width: 280px"
            allowClear
            placeholder="姓名查询"
          />
        </a-form-item>
        <a-form-item>
          <a-select
            v-model:value="formState.orgId"
            style="width: 280px"
            placeholder="部门查询"
            @change="handleChangeDept"
            allowClear
          >
            <a-select-option
              :value="item.orgId"
              v-for="item in deptList"
              :key="item.orgId"
              >{{ item.orgName }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-select
            v-model:value="formState.assessmentGrade"
            style="width: 280px"
            placeholder="考核等级查询"
            @change="handleChangeGrade"
            allowClear
          >
            <a-select-option
              :value="item.label"
              v-for="item in assessmentGradeList"
              :key="item.label"
              >{{ item.label }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary"  @click="getData">
            查询
          </a-button>
        </a-form-item>
        <a-form-item>
          <a-button type="primary"  @click="exportToExcel">
            导出
          </a-button>
        </a-form-item>
      </a-form>
    </div>
    <ReloadOutlined class="operation-btn" @click="getData"/>
  </div>
  <br />
 <div style="border-top: 1px solid #f0f0f0;">
    <div class="table-header" >
    <div style="width: 20%;">部门</div>
    <div style="width: 20%">姓名</div>
    <div style="width: 20%">评定分数</div>
    <div style="width: 20%">评定等级</div>
    <div style="width: 20%">产假</div>
  </div>
  <div class="table-header" v-for="(item, index) in dataList" :key="index" style="display: flex" >
    <div style="width: 20%;">{{ item.orgName }} ({{ item.children.length }}人)</div>
    <div
      style="display: flex;width: 80%; flex-direction: column; border-right: none; border-bottom: none; " >
      <div v-for="children in item.children" :key="children.orgId" style="width: 100%; display: flex; border-bottom: 1px solid #f0f0f0" class="table-chidren">
        <div style="width: 25%;">{{ children.empname }}</div>
        <div style="width: 25%;" class="clear-border">
          <a-tag color="red" v-if="children.status==-2">部门退回</a-tag>
          <a-tag color="red" v-if="children.status==-3">分管退回</a-tag>
          <a-tag color="red" v-if="children.status==-1">停止上报</a-tag>
          <a-tag color="red" v-if="children.status==0">待启用</a-tag>
          <a-tag color="red" v-if="children.status==1">开始填报</a-tag>
          <a-tag color="red" v-if="children.status==2">部门领导审核</a-tag>
          <a-tag color="red" v-if="children.status==3">分管领导审核</a-tag>
          <a-tag color="red" v-if="children.status==100">个人审核完毕</a-tag>
          <a-tag color="red" v-if="children.status==101">支部汇总</a-tag>
          <a-tag color="red" v-if="children.status==102">分管汇总</a-tag>
          <span  v-if="children.status==200"> {{ children.finalScore }}</span>
        </div>
        <div style="width: 25%;" class="clear-border">
          {{ children.assessmentGrade?children.assessmentGrade:'暂无' }}
        </div>
        <div style="width: 25%;" class="clear-border">
            <a-tag color="#87d068" v-if="children.onMaternityLeave">是</a-tag>
            <a-tag v-else>否</a-tag>
          </div>
      </div>
    </div>
  </div>
 </div>
</template>

<script lang="ts" setup>
import { reactive, UnwrapRef, ref } from "vue";
import { ReloadOutlined } from "@ant-design/icons-vue";
import * as XLSX from 'xlsx'; // 明确使用命名导入
import {
  GetViewAssessmentStauts,
  GetWorkersStatistcs,
  GetDeptInfo,
} from "@/api/main";
import useUserStore from "@/stores/modules/user";
import { message } from "ant-design-vue";
const userStore = useUserStore();

interface FormState {
  empname: string;
  statusGlid: number | null;
  assessmentGrade: string | null | number;
  orgId: string | null | number;
}
const formState: UnwrapRef<FormState> = reactive({
  empname: "",
  statusGlid: null,
  assessmentGrade: null,
  orgId: null,
});
const selectExamineName = ref("")
// 考核名称选中
const handleChangeExamineName = (value: any) => {
    formState.statusGlid = value;
  
};
// 部门选中
const handleChangeDept = (value: any) => {
  formState.orgId = value;
};
const handleChangeGrade = (value: any) => {
  formState.assessmentGrade = value;
};
// 考核名称list
const examineName = ref([]);
// 部门list
const deptList = ref([]);
// 表格数据
const dataList = ref([]);
const dataOriginalList = ref([]);

const assessmentGradeList = [
  { label: "A1" },
  { label: "A2" },
  { label: "B1" },
  { label: "B2" },
  { label: "B3" },
  { label: "C1" },
  { label: "C2" },
  { label: "D" },
];

const columns = [
  { title: '部门', dataIndex: 'orgName' },
  { title: '姓名', dataIndex: 'empname' },
  { title: '评定分数', dataIndex: 'finalScore' },
  { title: '评定等级', dataIndex: 'assessmentGrade' },
  { title: '产假', dataIndex: 'isOnMaternityLeaveDesc' },
]
const exportToExcel = () => {
    if(dataOriginalList.value.length == 0){
        message.error('暂无数据')
        return
    }else {
        const worksheet = XLSX.utils.aoa_to_sheet([columns.map(col => col.title),...dataOriginalList.value.map(item => columns.map(col => item[col.dataIndex]))]);
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
    XLSX.writeFile(workbook, `data.xlsx`);
    message.success('导出成功')
    }
   
};
// 获取考核名称
const getExamine = () => {
  GetViewAssessmentStauts({ empId: userStore.empid }).then((response: any) => {
    examineName.value = response.data;
  });
};
// 获取部门
const getDept = () => {
  GetDeptInfo().then((response: any) => {
    console.log(response);
    deptList.value = response.data;
  });
};
getExamine();
getDept();

// 获取职工双月考核列表
const getData = () => {
  GetWorkersStatistcs({
    empname: formState.empname,
    orgId: formState.orgId,
    personnelType: 0,
    assessmentGrade: formState.assessmentGrade,
    statusGlid: formState.statusGlid,
  }).then((response: any) => {
    console.log(response);
    let groupedData = {};
    // 把考核内容list 改为树形结构
    if(response.data){
        response.data.forEach((item) => {
      if (!groupedData[item.orgId]) {
        groupedData[item.orgId] = {
          orgName: item.orgName,
          orgId: item.orgId,
          children: [],
        };
      }
      groupedData[item.orgId].children.push(item);
    });
    }
    dataList.value = groupedData || [];
    dataOriginalList.value = response.data;
  });
};
</script>

<style scoped>
.operation-btn {
  border: 1px solid #f2f3f5;
  width: 35px;
  height: 35px;
  display: block;
  border-radius: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 10px;
  font-weight: 700;
}

.operation-btn:hover {
  background: #f2f3f5;
  color: #1677ff;
}

.table-header {
  display: flex;
  width: 100%;
  /* align-items: center; */
  /* border-top: 1px solid #f0f0f0; */
  border-left: 1px solid #f0f0f0;
}

.table-header > div {
  border-right: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  /* flex: 1; */
  /* height: 50px; */
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clear-border {
  align-items: normal;
}

.clear-border div {
  border: 1px solid #d9d9d9;
  min-height: 30px;
}

.table-chidren > div {
  border-bottom: none;
  line-height: 2;
  border-right: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
}
</style>
